<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      form {
        border: solid 1px #000;
        width: 500px;
        padding: 10px;
        margin: 0 auto;
        input {
          width: 480px;
          height: 30px;
          margin-left: 10px;
        }
        label {
          margin-left: 10px;
        }
        meter {
          margin-left: 10px;
          width: 480px;
        }
      }
    </style>
  </head>
  <main>
    <form>
      <label for=""
        >姓名：<br /><br /><input
          type="text"
          placeholder="请输入用户名" /></label
      ><br /><br />
      <label for="">手机号码：<br /><br /><input type="number" /></label
      ><br /><br />
      <label for="">邮箱地址：<br /><br /><input type="email" /></label
      ><br /><br />
      <label for=""
        >所属学校：<br /><br /><input
          type="text"
          placeholder="请选择"
          list="school" />
        <datalist id="school">
          <option value="长安一中"></option>
          <option value="长安二中"></option>
          <option value="长安三中"></option>
          <option value="长安四中"></option></datalist></label
      ><br /><br />
      <label for=""
        >入学成绩：<br /><br /><input type="text" value="69" /></label
      ><br /><br />
      <label for=""
        >基础水平：<br /><br /><meter
          value="70"
          min="0"
          max="100"
        ></meter></label
      ><br /><br />
      <label for="">入学日期：<br /><br /><input type="date" /></label
      ><br /><br />
      <label for="">毕业日期：<br /><br /><input type="date" /></label
      ><br /><br />
      <input type="submit" />
    </form>
  </main>
</html>
